正文：
今天要來實作登入頁面了，由於主要是提供後臺管理使用，因此暫時不會有忘記密碼和註冊等功能，但該有的表單驗證還是有的，先上圖吧

我們來將步驟拆解

1. 前往src/views 建立一個新組件，login.vue，並且前往 router 加入路由

{
    path: '/login',
    name: 'Login',
    component: () => import('../views/login.vue')
  },

2. 撰寫我們的 vue.data 內容吧，會有帳號輸入和密碼輸入的驗證規則和帳號及密碼存放的物件

data(){
    let usernameValid = (rule,value,callback) => {
        if(value.trim().length==0){
            return callback(new Error("請輸入帳號"))
        }else{
            return callback()
        }
    };
    let passwordValid = (rele,value,callback) => {
        if(value.trim().length==0){
            return callback(new Error("請輸入密碼"))
        }else{
            return callback()
        }
    }
    return{
        loginForm: {
            username: '',
            password: ''
        },
        loginRules: {
            username: [{validator: usernameValid, trigger: 'blur'}],
            password: [{validator: passwordValid, trigger: 'blur'}]
        }
    }
},

3. 開始來寫我們的樣板吧，這邊特別介紹 el-form 的 status-icon 屬性為開啟驗證提醒小圖示

<template>
    <div class="login">
        <el-form :model="loginForm" ref="loginForm" :rules="loginRules" status-icon @keyup.enter.native="submitForm()">
            <el-form-item prop="username">
                <div slot="label">
                    <span>帳號</span>
                </div>
                <el-input v-model="loginForm.username" placeholder="登入帳號"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <div slot="label">
                    <span>密碼</span>
                </div>
                <el-input type="password" v-model="loginForm.password" placeholder="登入密碼"></el-input>
            </el-form-item>
            <el-button type="warning" @click="submitForm()">登入</el-button>
        </el-form>
    </div>
</template>

4. 最後，將我們的方法給放上來，這邊特別介紹一下 element-ui 中的 message 訊息提示框，他會創立一個浮在螢幕頂端的提醒框，可以透過 showClose 決定其是否可以手動關閉，透過 duration 決定多少毫秒後自動關閉，預設為3000，而 message 則是提示框需要出現的訊息

methods: {
    submitForm: function(){
        let vm = this;
        this.$refs.loginForm.validate( valid => {
            if(valid){
                vm.$message.success({
                    showClose: true,
                    duration: 2500,
                    message: "登入成功"
                })
            }
        })
    }
}

好啦，這樣一個簡易的登入頁面就建立完畢了，至於樣式方面就請有需要的人再自行調整囉